<%= render_component_tag do %>
  <div class="relative">
    <input
      type="text"
      class="form-input text-sm"
      placeholder="<%== @placeholder %>"
      x-ref="input"
      x-model="<%= @model %>"
      x-effect="$dispatch('filter:change', { text, filter: this })"
      x-on:keydown.esc.stop="clear"
      x-on:keydown.f.window="if (!($event.shiftKey || $event.metaKey || $event.ctrlKey || $event.altKey)) { focus(); $event.preventDefault(); $event.stopPropagation(); }"
      x-on:keydown.stop>
      <button class="text-lookbook-icon-button-stroke hover:text-lookbook-icon-button-stroke-hover focus:ring-0 focus:outline-none absolute top-1/2 right-3 -translate-y-1/2" x-on:click="clear" x-bind:class="{hidden: !active}">
        <%= icon  :x, size: 4 %>
      </button>
  </div>
<% end %>
